import React from 'react'
import './Productiontro.css'
import { Typography, Carousel, Image, Rate, Table } from "antd";
class Productionintro extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

        }
        console.log('Productionintro', props)
    }

    componentDidMount() {
        console.log('Productionintro', this.props)
    }

    render() {
        return (
            <div className='intro-container'>
                <Typography.Title level={4}>{this.props.title}</Typography.Title>
                <Typography.Text > 原价{this.props.shorprice}</Typography.Text>
                <div className='intro-detail-content'>
                    {/* 这里面是详情的html */}
                    <Typography.Text style={{ marginLeft: 20 }}>
                        ￥ <span className='intro-detail-strong-text'>{this.props.price}</span> {" "}
                    </Typography.Text>
                    <Typography.Text style={{ marginLeft: 50 }}>
                       
                         <span className='intro-detail-strong-text'>{this.props.rating}</span> {" "}
                         评分  <Rate allowHalf defaultValue={this.props.rating} />
                    </Typography.Text>
                </div>

                {/* 渲染传来的图片  */}
                <Carousel autoplay={true} slidesToShow={3}>
                    {
                        this.props.pictures.map((p) => {
                            return (
                                <Image key={p} height={150} src={p} />
                            )
                         
                        })}

                </Carousel>
            </div>
        )
    }

}




export default Productionintro